<template>
  <div class="ele-table">
    <el-table
      size="mini"
      :data="data"
      v-bind="$attrs"
      border
      :stripe="true"
      style="width: 100%"
      v-on="$listeners"
    >
      <el-table-column v-if="isSelection" label="选择" type="selection" width="100" align="center" />
      <el-table-column v-if="isIndex" type="index" width="55" align="center" label="序号">
        <template v-slot="{ $index }">
          {{ (listQuery.pageNum-1) * listQuery.pageSize + $index + 1 }}
        </template>
      </el-table-column>
      <slot />
      <template v-for="(item) in columnList">
        <el-table-column
          v-if="item.hidden !== true"
          :key="item.key"
          :label="item.label"
          :align="item.align || 'center'"
          :width="item.width || 'auto'"
          :min-width="item.minWidth || '10'"
          :fixed="item.fixed || false"
          :show-overflow-tooltip="item.showOverflowTooltip || false"
          :prop="item.key"
        >
          <template v-slot="{ row }">
            <slot :name="item.key" :data="row">
              <el-image
                v-if="item.type === 'image'"
                style="width: 80px; height: auto"
                :src="row[item.key]"
                :preview-src-list="[row[item.key]]"
              />
              <span v-else>{{ row[item.key] }}</span>
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="pageSizes"
        :pager-count="5"
        :page-size.sync="pageSize"
        :current-page.sync="currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'EleTable',
  props: {
    pages: {
      type: Object,
      default() {
        return {
          pageNum: 10,
          pageSize: 1
        }
      }
    },
    data: {
      type: Array,
      default() {
        return []
      }
    },

    isPagination: {
      type: Boolean,
      default() {
        return true
      }
    },
    isSelection: {
      type: Boolean,
      default() {
        return true
      }
    },
    isIndex: {
      type: Boolean,
      default() {
        return false
      }
    },
    columnList: {
      type: Array,
      default() {
        return []
      }
    },
    total: {
      type: Number,
      default: 0
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      }
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.ele-table {
  width: 100%;
}
.pagination-container {
  //padding: 20px 16px;
  text-align: right;
}
.ele-table{
  &::v-deep .el-table{
    min-height: 10px;
    width: 100%;
    thead{
      th.el-table__cell{
        background: #f7f7f9;
      }
    }

    .el-table__header-wrapper {
      th:first-child {
        .cell {
          width: 50%;
          .el-checkbox {
            display: none;
          }
        }
        .cell:after{
          white-space: nowrap;
          content: '选择';
        }
      }
    }

  }
  .el-empty{
    padding: 20px;
  }
  .el-empty__image{
    width: 80px;
  }
}
</style>
